<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.net.InetAddress" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();

	InetAddress addr = InetAddress.getLocalHost();  
	String ip=request.getRemoteHost(); //获取本机ip
	String hostName=addr.getHostName().toString(); //获取本机计算机名称 
	request.setAttribute("ip", ip);
	request.setAttribute("hostName", request.getRemoteUser());
	
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"
	href="./easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="./easyui/themes/icon.css">
<script type="text/javascript" src="./easyui/jquery.min.js"></script>
<script type="text/javascript" src="./easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="./kindeditor/themes/default/default.css" />
<link rel="stylesheet" href="./kindeditor/plugins/code/prettify.css" />
<script charset="utf-8" src="./kindeditor/kindeditor-all.js"></script>
<script charset="utf-8" src="./kindeditor/lang/zh-CN.js"></script>
<script charset="utf-8" src="./kindeditor/plugins/code/prettify.js"></script>
</head>
<body>
	<div class="easyui-layout" fit="true">
		<!--user list -->
		<div data-options="region:'east',split:true" title="East"
			style="width: 300px;" id="usrList">
			
			</div>
		<div data-options="region:'center',iconCls:'icon-ok'" title="Center"
			style="padding: 5px">
			<div class="easyui-layout" data-options="fit:true">
				<!-- 				msg show -->
				<div data-options="region:'north',split:true" style="height: 40%" id="msgShow"></div>
				<!-- 				msg send -->
				<div data-options="region:'center'" style="height: 40%">
					<textarea name="content1" cols="100" rows="8" style="width:100%;height:326px;visibility:hidden;" id="content1">
					</textarea>
				</div>
				<div data-options="region:'south'" style="height: 10%">
					<div style="margin: 20px 0;">
						<a href="#" class="easyui-linkbutton"
							onclick="send()">发送消息</a>
					</div>
				</div>
			</div>
		</div>
	</div>
<script>
		KindEditor.ready(function(K) {
			var editor1 = K.create('textarea[id="content1"]', {
				cssPath : './kindeditor/plugins/code/prettify.css',
				uploadJson : './kindeditor/jsp/upload_json.jsp',
				fileManagerJson : './kindeditor/jsp/file_manager_json.jsp',
				allowFileManager : true,
				afterCreate : function() {
					var self = this;
					K.ctrl(document, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
					K.ctrl(self.edit.doc, 13, function() {
						self.sync();
						document.forms['example'].submit();
					});
				},
				afterBlur: function(){this.sync()}
			});
			prettyPrint();
		});
</script>
<!-- <script charset="utf-8" src="./js/mywebsocket.js"> -->
<script>
var websocket = null;
//判断当前浏览器是否支持WebSocket
if ('WebSocket' in window) {
	websocket = new WebSocket("ws://30.3.4.25:8080/kk-online/chat");
// 	websocket = new WebSocket("ws://30.3.22.109:8080/kk-online/chat");
} else {
	alert('当前浏览器 Not support websocket')
	websocket = new WebSocket("ws://30.3.4.25:8080/kk-online/chat");
// 	websocket = new WebSocket("ws://30.3.22.109:8080/kk-online/chat");
}
//连接发生错误的回调方法
websocket.onerror = function() {
	setMessageInnerHTML("WebSocket连接发生错误");
};
//连接成功建立的回调方法
websocket.onopen = function() {
	var data ={};
	var msg ={};
	data["msgType"]="online";
	msg["host"]="${ip}";
	msg["alias"]="${hostName}";
	console.log("ip:${ip}");
	data["msg"] = msg;
	websocket.send(JSON.stringify(data));
}
//接收到消息的回调方法
websocket.onmessage = function(event) {
	var data = event.data;
	var  myobj=JSON.parse(data); 

	if(myobj  instanceof Array){
		var options = "";
		for(var i=0;i<myobj.length;i++){  
			options+="<p>"+myobj[i].alias+"("+myobj[i].host+")</p>";
		}  
		document.getElementById('usrList').innerHTML = options;
	}else{
		txt="<p>"+myobj.fromUsr+"("+myobj.date+")</br>"
		+myobj.content+"</p>"
		setMessageInnerHTML(txt);
	}
	
	
}
//连接关闭的回调方法
websocket.onclose = function() {
	setMessageInnerHTML("WebSocket连接关闭");
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function() {
	closeWebSocket();
}
//将消息显示在网页上
function setMessageInnerHTML(innerHTML) {
	document.getElementById('msgShow').innerHTML += innerHTML + '\r\n';
}
//关闭WebSocket连接
function closeWebSocket() {
	websocket.close();
}
//发送消息
function send() {
	var txt = $("#content1").val();
	var data={};
	var msg ={};
	data["msgType"]="chatSingle";
	msg["fromUsr"]="${ip}";
	msg["toUsr"]="${ip}";
	msg["content"]=txt;
	msg["date"]=new Date();
	data["msg"] = msg;
	websocket.send(JSON.stringify(data));
	document.getElementById('content1').value ="";
}

</script>
</body>
</html>